<template>
  <div class="w-full h-full">
    <el-container class="w-full h-full">
      <el-header class="w-full bg-violet-300">
        <div class="w-full flex justify-between items-center p-4">
          <div class="flex-1">
            <span @click="() => { router.push({ name: 'index' }) }" class="text-white text-2xl font-bold">SPlayer</span>
          </div>
          <div class="flex-1 flex">
            <el-input v-model="searchText" class="w-full rounded-2xl" placeholder="Search" prefix-icon="el-icon-search"
              clearable />
            <el-button class="text-white" @click="() => { goToSearch(searchText) }">搜索</el-button>
          </div>
          <div class="flex-1 text-right flex justify-end gap-4">
            <div class="text-white">欢迎你，{{ username }}。</div>
            <div class="underline hover:cursor-pointer text-white" @click="logout">
              退出登录
            </div>

          </div>
        </div>
      </el-header>
      <el-container class="w-full">
        <el-aside width="200px" class="!bg-zinc-400">
          <el-menu class="h-full !bg-slate-500 text-white" text-color='white' active-text-color="#ffd04b">
            <el-menu-item index="0" @click="() => { router.push({ name: 'index' }) }">音乐发现</el-menu-item>
            <el-menu-item index="1" @click="() => { router.push({ name: 'discovery' }) }">歌单分类</el-menu-item>
            <el-menu-item index="2" @click="() => { router.push({ name: 'mylist' }) }">我的歌单</el-menu-item>
            <el-menu-item index="3" @click="() => { router.push({ name: 'rec' }) }">歌曲推荐</el-menu-item>
            <el-menu-item index="4" @click="() => { router.push({ name: 'person' }) }">个人中心 </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main class="p-4">
          <router-view class="w-full h-full" />
        </el-main>
      </el-container>
    </el-container>
    <div class="z-10 fixed bottom-0 w-full bg-violet-300 p-2 duration-150"
      :style="{ height: isLyricsExpanded ? '100%' : 'auto' }">
      <audio-player id="player" :show-playback-rate="false" class="z-10 m-10" ref="audioPlayerRef"
        :audio-list="audioPlay.audioPlayList.map(elm => elm.url)" theme-color="white" />
      <div v-if="isLyricsExpanded" class="w-full flex">
        <div class=" flex-1">
          <img class="w-2/3 h-2/3 max-w-72 max-h-72 m-auto rounded-lg" :src="playingDetail.song_pic" />
        </div>
        <div class="flex-1">
          <div v-html="lyrics" class="h-2/3  m-auto overflow-y-scroll">
          </div>
        </div>

      </div>
      <div @click="toggleLyrics" class="cursor-pointer absolute top-0 left-0 text-white text-xl text-center">
        <el-icon>
          <FullScreen />
        </el-icon>
      </div>
      <div class="cursor-pointer absolute top-0 right-4 text-white text-xl text-center">
          <el-popover
            placement="top-start"
            title="播放列表"
            :width="200"
            trigger="hover"
          >
            <template #reference>
              <el-icon>
                <service />
              </el-icon>
            </template>
            <div>

              <div v-for="item,key in audioPlay.audioPlayList">
                <div v-if="key !==  audioPlayerRef.currentPlayIndex "  class="bg-slate-50">
                {{item.name}}
                </div>
                <div v-else  class="bg-sky-600">
                {{item.name}}
                </div>
              </div>
            </div>

          </el-popover>

      </div>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from 'vue-router';
import { ref, onMounted } from 'vue';
import { api } from '@/boot/requests';
import axios from 'axios';
import { useAudioPlayListStore, player } from '@/stores/counter';
import {Service, Star} from "@element-plus/icons-vue";
const audioPlay = useAudioPlayListStore();
const audioPlayerRef = ref()
let searchText = ref('')
const isLyricsExpanded = ref(false)
const lyrics = ref('')
const playingDetail = ref(null)
const username = localStorage.getItem('username')
const user_id = localStorage.getItem('userId')
const email = localStorage.getItem('email')
const getLyrics = () => {
  let index = audioPlayerRef.value.currentPlayIndex
  let song = audioPlay.audioPlayList[index]
  console.log("index", index, "song", song)
  axios.get('http://127.0.0.1:8000/lyric?id=' + song.song_id).then(res => {
    let resp = res.data.data
    let result = resp.lyrics.replace(/\[\d{2}:\d{2}.\d{3}\]/g, '<br/>').replace(/\[\d{2}:\d{2}.\d{2}\]/g, '<br/>')
    lyrics.value = '<h5>' + song.name + '</h5>' + result
    playingDetail.value = resp
  })
}

const goToSearch = (q) => {
  router.push({ name: 'search', query: { q: q } })
}


const toggleLyrics = () => {
  isLyricsExpanded.value = !isLyricsExpanded.value
  getLyrics()
  lyrics.value = ''
}
// const player = useAudioPlayer()
// player.setAudioPlayer(audioPlayer.value)
onMounted(() => {
  // console.log(audioPlayer.value)
  player.value = audioPlayerRef.value
})
const router = useRouter();

const logout = () => {
  localStorage.clear()
  localStorage.clear()
  router.push({ name: 'login' })
}

</script>